<template>
  <div class="mt-30">
    <div class="article-archive-model">
      <div class="_module_explicit-padding-lf-15">
        <div class="mood-title flex-space-between">
          <div class="font-s-16">
            <svg t="1750124650705" class="icon icon-size-16 svg-translateY-2" viewBox="0 0 1024 1024"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="5252">
              <path
                d="M899.126756 177.635556L732.584533 11.093333A37.688889 37.688889 0 0 0 705.846756 0h-412.444445A37.688889 37.688889 0 0 0 255.997867 37.688889v63.004444H221.0112A36.124444 36.124444 0 0 0 184.886756 136.817778v20.764444H149.900089A36.124444 36.124444 0 0 0 113.775644 193.706667v794.168889A36.124444 36.124444 0 0 0 149.900089 1024h553.528889A36.124444 36.124444 0 0 0 739.553422 987.875556V967.111111h34.986667A36.124444 36.124444 0 0 0 810.664533 930.986667v-25.173334h61.866667A37.688889 37.688889 0 0 0 910.220089 867.555556V204.373333a37.688889 37.688889 0 0 0-11.093333-26.737777z m-20.053334 20.195555s0 0.853333 0.853334 1.28H725.3312a14.222222 14.222222 0 0 1-14.222222-14.222222V30.293333s0.995556 0 1.28 0.853334zM711.108978 987.875556a7.68 7.68 0 0 1-7.68 7.68H149.900089a7.68 7.68 0 0 1-7.68-7.68V193.706667a7.68 7.68 0 0 1 7.68-7.68H184.886756v744.96A36.124444 36.124444 0 0 0 221.0112 967.111111H711.108978z m71.111111-56.888889a7.68 7.68 0 0 1-7.68 7.68H221.0112a7.68 7.68 0 0 1-7.68-7.68V136.817778a7.68 7.68 0 0 1 7.68-7.68H255.997867V867.555556a37.688889 37.688889 0 0 0 37.688889 37.688888H782.220089zM881.775644 867.555556a9.244444 9.244444 0 0 1-9.244444 9.244444h-578.844444A9.244444 9.244444 0 0 1 284.442311 867.555556V37.688889a9.244444 9.244444 0 0 1 9.244445-9.244445H682.664533v156.444445a42.666667 42.666667 0 0 0 42.666667 42.666667h156.444444z"
                p-id="5253"></path>
              <path
                d="M753.775644 675.555556H412.442311a14.222222 14.222222 0 1 0 0 28.444444h341.333333a14.222222 14.222222 0 0 0 0-28.444444zM753.775644 547.555556H412.442311a14.222222 14.222222 0 1 0 0 28.444444h341.333333a14.222222 14.222222 0 0 0 0-28.444444zM398.220089 433.777778a14.222222 14.222222 0 0 0 14.222222 14.222222h341.333333a14.222222 14.222222 0 0 0 0-28.444444H412.442311a14.222222 14.222222 0 0 0-14.222222 14.222222z"
                p-id="5254"></path>
            </svg>
            <span>文章归档</span>
          </div>
          <div class="svg-translateY-2">
            <el-popover
              placement="top-start"
              title="展示规则"
              width="200"
              trigger="hover"
              content="在基于所有用户均可发布 “文章” 的前提下，系统将根据用户[登录状态]提供差异化展示：已登录用户仅可查看自己所发布 “文章” 归档，而未登录用户则能够查看整个站点的 “文章” 归档。只有状态正常的文章才会进行归档">
              <div class="font-s-14 color-grey cursor-pointer hover-cl" slot="reference">展示规则！</div>
            </el-popover>
          </div>
        </div>
        <el-skeleton class="mt-10" :rows="5" animated v-if="loading"/>
        <div v-if="articleList!=null && !loading" v-for="(item, index) in articleList" :key="index"
             style="margin-bottom: 60px">
          <h1 class="mb-20 font-s-26">{{ item.createTime }}
            <span class="font-s-16 color-grey" title="文章总数">「{{ item.list.length }}篇」</span></h1>
          <div v-for="(items,indexs) in item.list" :key="indexs" :ref="`articleArchiveItem${index}_${indexs}`">
            <div class="article-archive-list-item">
              <div class="line-height-26">
              <span class="color-grey font-s-16 mr-8">
                {{ $utils.parseTime(items.createTime, '{m}-{d}') }}</span>
                <span class="article-archive-item-title cursor-pointer">
                  <nuxt-link class="text-underline-hover font-s-18"
                             :to="`/article-details/`+$base64.encode(items.id)"
                             rel="noopener" target="_blank">
                     {{ items.articleTitle }}
                  </nuxt-link>
              </span>
              </div>
            </div>
          </div>
        </div>
        <div v-if="articleList==null || articleList.length==0 && !loading">
          <div style="text-align: center">
            <div>
              <svg t="1667825747332" class="icon" viewBox="0 0 1239 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="1560" width="50" height="50">
                <path
                  d="M1215.146667 961.194667c0 35.498667-240.298667 62.805333-540.672 62.805333-297.642667 0-540.672-27.306667-540.672-62.805333 0-35.498667 240.298667-62.805333 540.672-62.805334 297.642667 0 540.672 27.306667 540.672 62.805334"
                  fill="#DFDFDF" p-id="1561"></path>
                <path
                  d="M95.573333 245.76l-5.461333-5.461333c2.730667-2.730667 8.192-5.461333 13.653333-10.922667l5.461334 5.461333c-5.461333 2.730667-8.192 8.192-13.653334 10.922667z m19.114667-13.653333l-2.730667-8.192c8.192-5.461333 19.114667-10.922667 27.306667-16.384l2.730667 8.192c-8.192 5.461333-19.114667 10.922667-27.306667 16.384z m906.581333 494.250666h-24.576v-8.192h32.768v8.192c-2.730667-2.730667-5.461333 0-8.192 0z m16.384-2.730666v-8.192c10.922667 0 21.845333 0 32.768-2.730667v8.192c-10.922667 2.730667-21.845333 2.730667-32.768 2.730667z m-49.152 0c-10.922667 0-21.845333-2.730667-32.768-5.461334l2.730667-8.192c10.922667 2.730667 19.114667 2.730667 32.768 5.461334l-2.730667 8.192z m-40.96-8.192c-10.922667-2.730667-21.845333-5.461333-30.037333-10.922667l2.730667-8.192c8.192 5.461333 19.114667 8.192 30.037333 10.922667l-2.730667 8.192z m-38.229333-13.653334c-10.922667-5.461333-19.114667-13.653333-27.306667-21.845333l5.461334-5.461333c5.461333 8.192 13.653333 13.653333 24.576 19.114666l-2.730667 8.192z m-30.037333-30.037333c-5.461333-8.192-10.922667-19.114667-13.653334-30.037333l8.192-2.730667c2.730667 10.922667 5.461333 19.114667 13.653334 27.306667l-8.192 5.461333z m-16.384-38.229333c0-5.461333-2.730667-13.653333-2.730667-21.845334v-13.653333h8.192v10.922667c0 5.461333 0 13.653333 2.730667 19.114666l-8.192 5.461334z m8.192-40.96h-8.192c0-10.922667 2.730667-21.845333 5.461333-32.768l8.192 2.730666c-2.730667 10.922667-2.730667 19.114667-5.461333 30.037334z m8.192-38.229334l-8.192-2.730666c2.730667-10.922667 8.192-19.114667 10.922666-30.037334l8.192 2.730667c-2.730667 10.922667-8.192 19.114667-10.922666 30.037333z m16.384-38.229333l-8.192-2.730667c5.461333-8.192 8.192-19.114667 13.653333-30.037333l8.192 2.730667c-5.461333 10.922667-10.922667 21.845333-13.653333 30.037333z m16.384-35.498667l-8.192-2.730666c5.461333-8.192 10.922667-19.114667 16.384-27.306667l8.192 5.461333c-5.461333 5.461333-10.922667 13.653333-16.384 24.576z m19.114666-35.498666l-8.192-5.461334c5.461333-8.192 10.922667-19.114667 16.384-27.306666l5.461334 5.461333c-2.730667 8.192-8.192 19.114667-13.653334 27.306667z m21.845334-32.768l-5.461334-5.461334c5.461333-8.192 10.922667-16.384 19.114667-27.306666l5.461333 5.461333c-5.461333 8.192-13.653333 16.384-19.114666 27.306667z m24.576-35.498667l-5.461334-5.461333c5.461333-8.192 13.653333-16.384 19.114667-27.306667l5.461333 5.461333c-8.192 10.922667-13.653333 19.114667-19.114666 27.306667z m21.845333-32.768l-5.461333-5.461333c5.461333-8.192 13.653333-16.384 19.114666-24.576l5.461334 5.461333c-5.461333 8.192-10.922667 16.384-19.114667 24.576z m27.306667-30.037333l-5.461334-5.461334c5.461333-8.192 13.653333-16.384 19.114667-24.576l5.461333 5.461334c-8.192 8.192-13.653333 16.384-19.114666 24.576z m24.576-32.768l-5.461334-5.461334c5.461333-8.192 13.653333-16.384 21.845334-24.576l5.461333 5.461334c-8.192 8.192-16.384 16.384-21.845333 24.576z m24.576-30.037334l-5.461334-5.461333 5.461334-5.461333c5.461333-5.461333 10.922667-13.653333 16.384-19.114667l5.461333 5.461333c-5.461333 5.461333-10.922667 10.922667-16.384 19.114667l-5.461333 5.461333z m27.306666-32.768l-5.461333-5.461333c8.192-8.192 13.653333-19.114667 19.114667-27.306667l5.461333 5.461334c-5.461333 10.922667-13.653333 19.114667-19.114667 27.306666zM150.186667 210.261333l-2.730667-8.192c8.192-2.730667 16.384-8.192 27.306667-13.653333l2.730666 8.192c-8.192 2.730667-19.114667 8.192-27.306666 13.653333zM185.685333 191.146667l-2.730666-5.461334c8.192-5.461333 19.114667-10.922667 30.037333-13.653333l2.730667 8.192c-10.922667 2.730667-19.114667 8.192-30.037334 10.922667z m939.349334-5.461334l-5.461334-5.461333c5.461333-10.922667 10.922667-19.114667 16.384-27.306667l8.192 2.730667c-5.461333 10.922667-10.922667 19.114667-19.114666 30.037333z m-901.12-10.922666L218.453333 166.570667c10.922667-2.730667 21.845333-8.192 32.768-10.922667l2.730667 8.192c-10.922667 2.730667-21.845333 5.461333-30.037333 10.922667z m35.498666-16.384l-2.730666-5.461334c10.922667-2.730667 19.114667-8.192 30.037333-10.922666l2.730667 8.192c-8.192 0-19.114667 5.461333-30.037334 8.192zM1146.88 147.456l-8.192-2.730667c2.730667-8.192 8.192-19.114667 8.192-30.037333l8.192 2.730667c-2.730667 10.922667-5.461333 21.845333-8.192 30.037333z m-849.237333-2.730667l-2.730667-8.192c10.922667-2.730667 19.114667-8.192 30.037333-10.922666l2.730667 8.192c-8.192 2.730667-19.114667 8.192-30.037333 10.922666z m38.229333-13.653333l-2.730667-8.192c10.922667-2.730667 21.845333-8.192 30.037334-10.922667l2.730666 8.192c-8.192 2.730667-19.114667 8.192-30.037333 10.922667z m38.229333-13.653333l-2.730666-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-10.922667l5.461333 10.922667-32.768 8.192zM1157.802667 109.226667h-8.192v-8.192c0-8.192 0-13.653333-2.730667-21.845334l8.192-2.730666c2.730667 8.192 2.730667 16.384 2.730667 24.576V109.226667z m-742.741334-2.730667l-2.730666-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-8.192l2.730667 8.192c-10.922667 0-21.845333 2.730667-30.037334 8.192z m38.229334-13.653333l-2.730667-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-8.192l2.730667 8.192c-10.922667 2.730667-19.114667 5.461333-30.037333 8.192zM491.52 81.92l-2.730667-8.192 32.768-8.192 2.730667 8.192L491.52 81.92z m38.229333-8.192l-2.730666-8.192 32.768-8.192 2.730666 8.192-32.768 8.192z m614.4-2.730667c-5.461333-8.192-10.922667-16.384-19.114666-24.576l5.461333-5.461333c8.192 8.192 16.384 16.384 21.845333 27.306667l-8.192 2.730666z m-573.44-8.192l-2.730666-8.192 32.768-8.192V54.613333c-8.192 2.730667-19.114667 5.461333-30.037334 8.192z m38.229334-8.192l-2.730667-8.192 32.768-8.192 2.730667 8.192-32.768 8.192z m40.96-10.922666l-2.730667-8.192c10.922667-2.730667 21.845333-5.461333 32.768-5.461334l2.730667 8.192c-10.922667 2.730667-21.845333 5.461333-32.768 5.461334zM1119.573333 40.96c-8.192-5.461333-19.114667-10.922667-27.306666-13.653333V19.114667c10.922667 5.461333 21.845333 8.192 30.037333 16.384l-2.730667 5.461333z m-428.714666-5.461333l-2.730667-8.192c10.922667 0 21.845333-2.730667 32.768-5.461334l2.730667 8.192c-13.653333 2.730667-24.576 5.461333-32.768 5.461334z m38.229333-5.461334V21.845333c10.922667-2.730667 21.845333-2.730667 32.768-5.461333v8.192c-10.922667 2.730667-21.845333 2.730667-32.768 5.461333z m354.986667-5.461333c-10.922667-2.730667-19.114667-5.461333-30.037334-8.192l2.730667-8.192 32.768 8.192-5.461333 8.192zM770.048 24.576V16.384c10.922667-2.730667 21.845333-2.730667 32.768-5.461333v8.192c-10.922667 0-21.845333 2.730667-32.768 5.461333z m40.96-5.461333V10.922667c10.922667 0 21.845333-2.730667 32.768-2.730667v8.192c-10.922667 0-21.845333 0-32.768 2.730667z m232.106667-5.461334c-10.922667-2.730667-21.845333-2.730667-32.768-5.461333V0c10.922667 0 21.845333 2.730667 32.768 5.461333v8.192z m-193.877334 0V5.461333c10.922667 0 21.845333-2.730667 32.768-2.730666v8.192c-10.922667 0-21.845333 2.730667-32.768 2.730666z m40.96-2.730666V2.730667c10.922667 0 21.845333 0 32.768-2.730667v8.192c-10.922667 0-21.845333 0-32.768 2.730667z m114.688 0c-10.922667 0-21.845333-2.730667-32.768-2.730667V0c10.922667 0 21.845333 0 32.768 2.730667v8.192zM931.157333 8.192V0h32.768v8.192h-32.768z m150.186667 712.704v-8.192c5.461333 0 10.922667-2.730667 16.384-2.730667l2.730667 8.192c-5.461333 0-10.922667 2.730667-19.114667 2.730667z m0 0"
                  fill="#D9D9D9" p-id="1562"></path>
                <path
                  d="M966.656 106.496H316.757333s-49.152-5.461333-51.882666 51.882667c-2.730667 57.344 0 671.744 0 750.933333 0 65.536 90.112 79.189333 122.88 40.96 43.690667-46.421333 16.384-103.765333 5.461333-106.496-8.192-2.730667 608.938667 0 608.938667 0V180.224c-2.730667 0 5.461333-73.728-35.498667-73.728"
                  fill="#FFFFFF" p-id="1563"></path>
                <path
                  d="M333.141333 983.04c-24.576 0-46.421333-8.192-62.805333-24.576-13.653333-13.653333-19.114667-30.037333-19.114667-49.152v-122.88c0-204.8-2.730667-584.362667 0-630.784 2.730667-46.421333 32.768-62.805333 60.074667-62.805333h652.629333c10.922667 0 21.845333 5.461333 30.037334 13.653333 21.845333 24.576 16.384 70.997333 16.384 76.458667v674.474666H409.6c2.730667 5.461333 2.730667 8.192 5.461333 13.653334 5.461333 16.384 10.922667 54.613333-21.845333 90.112-13.653333 13.653333-35.498667 21.845333-60.074667 21.845333z m-19.114666-865.621333c-13.653333 0-38.229333 5.461333-38.229334 43.690666-2.730667 46.421333 0 425.984 0 628.053334v122.88c0 13.653333 5.461333 24.576 13.653334 35.498666 10.922667 10.922667 30.037333 19.114667 46.421333 19.114667 19.114667 0 35.498667-5.461333 43.690667-16.384 19.114667-21.845333 21.845333-43.690667 21.845333-57.344 0-16.384-8.192-30.037333-10.922667-32.768l-8.192-2.730667v-8.192c0-2.730667 0-5.461333 13.653334-8.192 16.384-2.730667 57.344-2.730667 150.186666-2.730666h445.098667v-655.36c2.730667-13.653333 2.730667-46.421333-10.922667-60.074667-2.730667-2.730667-8.192-5.461333-13.653333-5.461333H314.026667z m0 0"
                  fill="#A9B1B6" p-id="1564"></path>
                <path
                  d="M346.794667 229.376h570.709333v120.149333H346.794667V229.376z m0 174.762667h141.994666V436.906667h-141.994666v-32.768z m0 90.112h286.72v32.768H346.794667v-32.768z m0 90.112H518.826667v32.768h-172.032v-32.768z m0 98.304h346.794666v32.768H346.794667V682.666667z m35.498666 144.725333s60.074667 111.957333-51.882666 147.456c0 0-5.461333 0 0 0 240.298667 2.730667 480.597333 2.730667 720.896-2.730667 10.922667-2.730667 21.845333-8.192 30.037333-13.653333 5.461333-2.730667 19.114667-16.384 27.306667-35.498667 8.192-21.845333 10.922667-54.613333-10.922667-79.189333-5.461333-8.192-13.653333-13.653333-24.576-16.384H382.293333"
                  fill="#EDEEEE" p-id="1565"></path>
                <path
                  d="M617.130667 983.04c-95.573333 0-188.416 2.730667-283.989334 0l-16.384-2.730667 2.730667-13.653333v-2.730667h8.192c27.306667-8.192 46.421333-24.576 54.613333-43.690666 16.384-40.96-13.653333-84.650667-13.653333-84.650667l-5.461333-10.922667 712.704-5.461333h2.730666c10.922667 5.461333 19.114667 10.922667 27.306667 19.114667 21.845333 24.576 21.845333 62.805333 10.922667 87.381333-5.461333 16.384-16.384 27.306667-30.037334 38.229333-10.922667 8.192-21.845333 13.653333-32.768 16.384h-2.730666c-144.725333 2.730667-289.450667 2.730667-434.176 2.730667z m-251.221334-16.384c226.645333 2.730667 456.021333 0 682.666667-2.730667 8.192-2.730667 19.114667-8.192 27.306667-13.653333 10.922667-8.192 19.114667-19.114667 24.576-32.768 8.192-21.845333 8.192-51.882667-8.192-70.997333-5.461333-5.461333-10.922667-10.922667-19.114667-13.653334h-682.666667c8.192 19.114667 21.845333 57.344 8.192 92.842667-5.461333 16.384-16.384 30.037333-32.768 40.96z m0 0"
                  fill="#A9B1B6" p-id="1566"></path>
                <path
                  d="M1127.765333 688.128c-8.192-8.192-24.576-16.384-43.690666-16.384 0 0 21.845333 0 40.96-13.653333 10.922667-8.192 19.114667-24.576 19.114666-43.690667 0 0 0 27.306667 19.114667 46.421333 8.192 8.192 21.845333 13.653333 40.96 13.653334 0 0-21.845333 0-38.229333 13.653333-10.922667 8.192-19.114667 24.576-19.114667 43.690667-2.730667 0 0-24.576-19.114667-43.690667M54.613333 286.72c-10.922667-10.922667-30.037333-19.114667-54.613333-19.114667 0 0 30.037333 0 51.882667-19.114666 13.653333-10.922667 21.845333-30.037333 21.845333-57.344 0 0 0 35.498667 24.576 57.344 10.922667 10.922667 30.037333 19.114667 51.882667 19.114666 0 0-27.306667 0-49.152 19.114667-13.653333 10.922667-24.576 30.037333-24.576 57.344-2.730667-2.730667 0-35.498667-21.845334-57.344M1105.92 434.176c-5.461333-5.461333-10.922667-8.192-21.845333-8.192 0 0 10.922667 0 19.114666-8.192 5.461333-5.461333 10.922667-13.653333 10.922667-24.576 0 0 0 16.384 10.922667 24.576 5.461333 5.461333 10.922667 8.192 19.114666 8.192 0 0-10.922667 0-19.114666 8.192-5.461333 5.461333-10.922667 13.653333-10.922667 24.576 0 0 2.730667-13.653333-8.192-24.576"
                  fill="#E79F9F" p-id="1567"></path>
                <path
                  d="M1193.301333 595.285333c-5.461333-5.461333-13.653333-8.192-24.576-8.192 0 0 13.653333 0 24.576-8.192 5.461333-5.461333 10.922667-13.653333 10.922667-27.306666 0 0 0 16.384 10.922667 27.306666 5.461333 5.461333 13.653333 8.192 24.576 8.192 0 0-13.653333 0-24.576 8.192-5.461333 5.461333-10.922667 13.653333-10.922667 27.306667 0-2.730667 0-19.114667-10.922667-27.306667M917.504 778.24c-2.730667-2.730667-8.192-5.461333-13.653333-5.461333 0 0 8.192 0 13.653333-5.461334 2.730667-2.730667 5.461333-8.192 5.461333-16.384 0 0 0 10.922667 5.461334 16.384 2.730667 2.730667 8.192 5.461333 13.653333 5.461334 0 0-8.192 0-13.653333 5.461333-2.730667 2.730667-5.461333 8.192-5.461334 16.384 0-2.730667 2.730667-10.922667-5.461333-16.384"
                  fill="#DC8484" p-id="1568"></path>
                <path
                  d="M1067.690667 518.826667c0 65.536-38.229333 122.88-92.842667 147.456-21.845333 10.922667-155.648 60.074667-180.224 60.074666-27.306667 0 57.344-51.882667 35.498667-62.805333-54.613333-27.306667-90.112-84.650667-90.112-144.725333 0-90.112 73.728-163.84 163.84-163.84s163.84 73.728 163.84 163.84"
                  fill="#F8E7E7" p-id="1569"></path>
                <path
                  d="M794.624 740.010667c-10.922667 0-16.384-5.461333-16.384-8.192-5.461333-10.922667 5.461333-19.114667 21.845333-35.498667 5.461333-5.461333 16.384-16.384 19.114667-21.845333-57.344-30.037333-90.112-90.112-90.112-152.917334 0-98.304 79.189333-174.762667 177.493333-174.762666s174.762667 79.189333 174.762667 174.762666c0 68.266667-38.229333 131.072-101.034667 158.378667-19.114667 8.192-158.378667 60.074667-185.685333 60.074667z m109.226667-371.370667c-84.650667 0-152.917333 68.266667-152.917334 152.917333 0 57.344 32.768 109.226667 81.92 136.533334 5.461333 2.730667 8.192 8.192 10.922667 13.653333 2.730667 13.653333-10.922667 27.306667-27.306667 43.690667 43.690667-10.922667 131.072-43.690667 152.917334-54.613334 51.882667-24.576 87.381333-79.189333 87.381333-136.533333-2.730667-87.381333-68.266667-155.648-152.917333-155.648z m0 0"
                  fill="#E79F9F" p-id="1570"></path>
                <path
                  d="M846.506667 518.826667c0 10.922667-8.192 16.384-16.384 16.384-10.922667 0-16.384-8.192-16.384-16.384 0-10.922667 8.192-16.384 16.384-16.384s16.384 8.192 16.384 16.384"
                  fill="#FCEAEA" p-id="1571"></path>
                <path
                  d="M830.122667 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461333-27.306666 8.192-8.192 19.114667-10.922667 27.306667-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576s-10.922667 24.576-24.576 24.576z m0-35.498666c-5.461333 0-8.192 5.461333-8.192 10.922666s2.730667 8.192 8.192 10.922667c5.461333 0 8.192-5.461333 8.192-10.922667 0-8.192-2.730667-10.922667-8.192-10.922666z m0 0"
                  fill="#E79F9F" p-id="1572"></path>
                <path
                  d="M917.504 518.826667c0 10.922667-8.192 16.384-16.384 16.384-10.922667 0-16.384-8.192-16.384-16.384 0-10.922667 8.192-16.384 16.384-16.384s16.384 8.192 16.384 16.384"
                  fill="#FCEAEA" p-id="1573"></path>
                <path
                  d="M898.389333 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461334-27.306666 8.192-8.192 19.114667-10.922667 27.306666-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576 2.730667 10.922667-8.192 24.576-24.576 24.576z m0-35.498666c-2.730667 0-5.461333 2.730667-8.192 5.461333-2.730667 2.730667-2.730667 5.461333 0 10.922667 2.730667 2.730667 5.461333 5.461333 8.192 5.461333 5.461333 0 10.922667-5.461333 10.922667-10.922667 0-8.192-5.461333-10.922667-10.922667-10.922666z m0 0"
                  fill="#E79F9F" p-id="1574"></path>
                <path
                  d="M991.232 518.826667c0 5.461333-2.730667 10.922667-8.192 16.384-5.461333 2.730667-10.922667 2.730667-16.384 0-8.192-2.730667-10.922667-8.192-10.922667-16.384 0-10.922667 8.192-16.384 16.384-16.384s19.114667 8.192 19.114667 16.384"
                  fill="#FCEAEA" p-id="1575"></path>
                <path
                  d="M972.117333 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461334-27.306666 8.192-8.192 19.114667-10.922667 27.306666-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576 2.730667 10.922667-10.922667 24.576-24.576 24.576z m0-35.498666c-2.730667 0-5.461333 2.730667-8.192 5.461333-2.730667 2.730667-2.730667 5.461333 0 10.922667 2.730667 2.730667 5.461333 5.461333 8.192 5.461333 5.461333 0 10.922667-5.461333 10.922667-10.922667 0-8.192-5.461333-10.922667-10.922667-10.922666z m0 0"
                  fill="#E79F9F" p-id="1576"></path>
              </svg>
            </div>
            <span class="color-grey font-s-14">
          暂无文章
          </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {createAnimator, triggerNestedAnimation} from '~/plugins/animationUtils'

export default {
  head: {
    title: `文章归档 - ${process.env.PROJECT_NAME}`,
  },
  name: "articleArchive",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: -1,
      },
      total: 0,
      loading: true,
      articleList: [],
      articleDialogVisible: false,
    }
  },
  methods: {
    update() {
      this.articleDialogVisible = true;
    },
    getList() {
      this.loading = true;
      this.$API("/white/article/archive", "get", this.queryParams).then(res => {
        this.articleList = res.rows;
        this.total = res.total;
        this.loading = false;
        this.$nextTick(() => {
          triggerNestedAnimation(this, this.articleList, 'articleArchiveItem{groupIndex}_{subIndex}');
        });
      })
    },
  },
  mounted() {
    // 初始化动画器
    this.animator = createAnimator(this, 'commonList')
    this.getList();
  },
}
</script>

<style>
.article-archive-model {
  width: 1000px;
  margin: auto
}

.article-archive-list-item {
  margin: 15px 0px;
  width: auto;
  padding: 8px 8px;
  border-radius: 4px;
  transition: .2s;
}

.article-archive-list-item:hover {
  background-color: #F3F3F3;
}

.mood-title {
  background-color: #F3F3F3;
  padding: 15px;
  margin-bottom: 30px;
  border-radius: 4px;
  font-style: italic;
}

.el-drawer {
  border-radius: 20px;
}

.article-archive-item-title {
  border-bottom: 1px solid #dfe4ea;
  display: inline-block
}

@media (max-width: 510px) {
  .article-archive-model {
    width: 100%;
    margin: auto;
  }
}
</style>
